<template>
	<view>

		<view class="ztsj-box">
			<view class="ztsj-head gray3">{{$t('fan').整体状态}}</view>
			<view class="ztzt-box align-center">
				<view class="ztzt-list flex-col align-center">
					<view class="align-center justify-center" @click="tcShow(1)">
						<view class="ztzt-text gray6">{{$t('fan').整体发展力}}</view>
						<image class="ztzt-icon" src="../../static/images/fans/icon_wenhao.png" mode=""></image>
					</view>
					<view class="posRelative mt10" style="width: 188rpx;height: 203rpx;"
						v-if="totalInfo.power_status==1">
						<image src="../../static/images/fans/huiyuanquan.png" style="width: 188rpx;height: 203rpx;">
						</image>
						<view class="posAbsort w100 tc bold gray9"
							style="top: 42%;left: 50%;transform: translate(-50%, -50%);">
							<text>{{$t('common').暂无数据}}</text>
						</view>
					</view>
					<view class="posRelative mt10" style="width: 188rpx;height: 203rpx;"
						v-if="1<totalInfo.power_status&&totalInfo.power_status<4">
						<image src="../../static/images/fans/lvyuanquan.png" style="width: 188rpx;height: 203rpx;">
						</image>
						<view class="posAbsort w100 tc bold gray9"
							style="top: 42%;left: 50%;transform: translate(-50%, -50%);color: #70B603;">
							<text>{{totalInfo.power_status==2?this.$t('fan').不利发展:this.$t('fan').发展困难}}</text>
						</view>
					</view>
					<view class="posRelative mt10" style="width: 188rpx;height: 203rpx;"
						v-if="3<totalInfo.power_status&&totalInfo.power_status<6">
						<image src="../../static/images/fans/huangyuanquan.png" style="width: 188rpx;height: 203rpx;">
						</image>
						<view class="posAbsort w100 tc bold gray9"
							style="top: 42%;left: 50%;transform: translate(-50%, -50%);color: #FD9E37;">
							<text>{{totalInfo.power_status==4?this.$t('fan').利好发展:this.$t('fan').稳健发展}}</text>
						</view>
					</view>
					<view class="posRelative mt10" style="width: 188rpx;height: 203rpx;"
						v-if="totalInfo.power_status==6">
						<image src="../../static/images/fans/hongyuanquan.png" style="width: 188rpx;height: 203rpx;">
						</image>
						<view class="posAbsort w100 tc bold gray9"
							style="top: 42%;left: 50%;transform: translate(-50%, -50%);color: #F44A42;">
							<text>{{$t('fan').发展优异}}</text>
						</view>
					</view>
				</view>
				<view class="ztzt-list flex-col align-center">
					<view class="align-center justify-center" @click="tcShow(2)">
						<view class="ztzt-text gray6">{{$t('fan').整体活跃度}}</view>
						<image class="ztzt-icon" src="../../static/images/fans/icon_wenhao.png" mode=""></image>
					</view>
					<view class="posRelative mt10" style="width: 188rpx;height: 203rpx;"
						v-if="totalInfo.consum_status==1">

						<image src="../../static/images/fans/huiyuanquan.png" style="width: 188rpx;height: 203rpx;">
						</image>
						<view class="posAbsort w100 tc bold gray9"
							style="top: 42%;left: 50%;transform: translate(-50%, -50%);">
							<text>{{$t('common').暂无数据}}</text>
						</view>
					</view>
					<view class="posRelative mt10" style="width: 188rpx;height: 203rpx;"
						v-if="1<totalInfo.consum_status&&totalInfo.consum_status<4">
						<image src="../../static/images/fans/lvyuanquan.png" style="width: 188rpx;height: 203rpx;">
						</image>
						<view class="posAbsort w100 tc bold gray9"
							style="top: 42%;left: 50%;transform: translate(-50%, -50%);color: #70B603;">
							<text>{{totalInfo.consum_status==2?this.$t('fan').无消费力:this.$t('fan').低消费力}}</text>
						</view>
					</view>
					<view class="posRelative mt10" style="width: 188rpx;height: 203rpx;"
						v-if="3<totalInfo.consum_status&&totalInfo.consum_status<6">
						<image src="../../static/images/fans/huangyuanquan.png" style="width: 188rpx;height: 203rpx;">
						</image>
						<view class="posAbsort w100 tc bold gray9"
							style="top: 42%;left: 50%;transform: translate(-50%, -50%);color: #FD9E37;">
							<text>{{totalInfo.consum_status==4?this.$t('fan').偏低消费力:this.$t('fan').中消费力}}</text>
						</view>
					</view>
					<view class="posRelative mt10" style="width: 188rpx;height: 203rpx;"
						v-if="5<totalInfo.consum_status&&totalInfo.consum_status<8">
						<image src="../../static/images/fans/hongyuanquan.png" style="width: 188rpx;height: 203rpx;">
						</image>
						<view class="posAbsort w100 tc bold gray9"
							style="top: 42%;left: 50%;transform: translate(-50%, -50%);color: #F44A42;">
							<text>{{totalInfo.consum_status==6?this.$t('fan').高消费力:this.$t('fan').超高消费力}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 销售额统计 -->
		<view class="ztsj-box">
			<view class="ztsj-head gray3 align-center" style="border-bottom: 2rpx solid #EEEEEE;">
				<view><text>{{$t('fan').销售额统计}}</text></view>
				<!-- 				<image @click="tcShow(5)" style="width: 28rpx;height: 28rpx;margin-left: 16rpx;"
					src="../../static/images/fans/icon_wenhao.png" mode=""></image> -->
			</view>

			<view class="fstj-list">
				<view class="align-center">
					<view class="fstj-h-tab"v-for="(m,n) in xseTab" :key="n" :class="n==xseId?'fstj-h-t-ac':''"
						@click="xseBtn(n)">{{$t('common')[m.text]}}</view>
				</view>
			</view>

			<view class="cjtj-box" style="padding-top: 0;">
				<view class="align-center">
					<view v-if="xseId==0">
						<view class="cjtj-rs gray3">
							{{$t('fan').销售额}}：{{totalInfo.moon_settl_sell.toLocaleString() || 0}}
						</view>
<!-- 						<view class="cjtj-rs gray3">
							{{$t('fan').贡献收益}}:{{totalInfo.devote || 0}}
						</view> -->
					</view>
					<view v-if="xseId==1">
						<view class="cjtj-rs gray3">
							{{$t('fan').销售额}}：{{totalInfo.up_moon_settl_sell.toLocaleString() || 0 }}
						</view>
<!-- 						<view class="cjtj-rs gray3">
							{{$t('fan').贡献收益}}:{{totalInfo.up_devote || 0}}
						</view> -->
					</view>
					<view v-if="xseId==2">
						<view class="cjtj-rs gray3">
							{{$t('fan').销售额}}：{{totalInfo.total_sell.toLocaleString() || 0 }}
						</view>
<!-- 						<view class="cjtj-rs gray3">
							{{$t('fan').贡献收益}}:{{totalInfo.total_devote || 0}}
						</view> -->
					</view>
				</view>
				<view class="charts-box" style="width: 650rpx;height: 500rpx;">
					<l-echart ref="chartRef" @finished="init"></l-echart>
				</view>
			</view>
		</view>

		<!-- 本月新增销售额趋势 -->
		<view class="ztsj-box">
			<view class="ztsj-head gray3">{{$t('fan').本月新增销售额趋势}}</view>
			<view class="charts-box">
				<qiun-data-charts type="line" :opts="byxzOpts" :chartData="byxzChart" :ontouch="true" />
			</view>
		</view>

		<!-- 已结算销售额统计 -->
		<view class="ztsj-box">
			<view class="ztsj-head gray3">{{$t('fan').已结算销售额统计}}</view>
			<view class="yjs-box">
				<view class="align-center flex-wrap">
					<view class="yjs-list" v-for="(m,n) in yjsArr" :key="n">
						<view class="gray6 yjs-text">{{$t('fan')[m.text]}}</view>
						<view class="gray3 yjs-num">{{m.num}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 本月已结算销售额趋势 -->
		<view class="ztsj-box">
			<view class="ztsj-head gray3">{{$t('fan').本月已结算销售额趋势}}</view>
			<view class="charts-box">
				<qiun-data-charts type="line" :opts="byjsOpts" :chartData="byjsChart" :ontouch="true" />
			</view>
		</view>

		<!-- 销售统计 -->
		<view class="ztsj-box">
			<view class="ztsj-head gray3" style="border-bottom: 2rpx solid #EEEEEE;">
				<text>{{$t('fan').销售统计}}</text>
				<image @click="tcShow(5)" style="width: 28rpx;height: 28rpx;margin-left: 16rpx;"
					src="../../static/images/fans/icon_wenhao.png" mode=""></image>
			</view>
			<view class="fstj-list" style="border-bottom: 2rpx solid #EEEEEE;">
				<view class="fsth-head align-center justify-between">
					<view class="align-center">
						<view class="fstj-h-tab" v-for="(m,n) in xstjTab" :key="n" :class="n==xstjId?'fstj-h-t-ac':''"
							@click="xstjBtn(n)">{{$t('common')[m.text]}}</view>
					</view>
				</view>

				<view class="align-center justify-around">
					<view class="fstj-l-item" v-for="(m,n) in xstjArr" :key="n">
						<view class="fstj-l-text gray6">{{$t('common')[m.text]}}</view>
						<view class="fstj-l-num gray3">{{m.num}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 粉丝统计 -->
		<view class="ztsj-box">
			<view class="ztsj-head gray3" style="border-bottom: 2rpx solid #EEEEEE;">
				<text>{{$t('fan').按等级统计粉丝人数}}</text>
				<image @click="tcShow(6)" style="width: 28rpx;height: 28rpx;margin-left: 16rpx;"
					src="../../static/images/fans/icon_wenhao.png" mode=""></image>
			</view>
			<view class="fstj-list" style="border-bottom: 2rpx solid #EEEEEE;">
					<view class="align-center">
						<view class="fstj-h-tab" v-for="(m,n) in djTab" :key="n" :class="n==djId?'fstj-h-t-ac':''"
							@click="djBtn(n)">{{$t('common')[m.text]}}</view>
					</view>
				<view class="align-center flex-wrap ">
					<view class="fstj-l-item " style="width: 50%;" v-for="(m,n) in djArr" :key="n">
						<view class="fstj-l-text gray6">{{$t('fan')[m.text]}}</view>
						<view class="fstj-l-num gray3">{{m.num}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="ztsj-box">
			<view class="ztsj-head gray3 align-center" style="border-bottom: 2rpx solid #EEEEEE;">
				<text>{{$t('fan').按活跃度统计粉丝人数}}</text>
				<image @click="tcShow(3)" style="width: 28rpx;height: 28rpx;margin-left: 16rpx;"
					src="../../static/images/fans/icon_wenhao.png" mode=""></image>
			</view>
			<view class="fstj-list" style="padding: 0rpx 0 20rpx;">
				<view class="align-center flex-wrap">
					<view class="fstj-l-item" v-for="(m,n) in hydArr" :key="n">
						<view class="fstj-l-text gray6">{{$t('fan')[m.text]}}</view>
						<view class="fstj-l-num gray3">{{m.num}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 成交粉丝统计 -->
		<view class="ztsj-box">
			<view class="align-center">
				<view class="ztsj-head gray3">{{$t('fan').成交粉丝统计}}</view>
				<image style="width: 28rpx;height: 28rpx;margin-left: 16rpx;"
					src="../../static/images/fans/icon_wenhao.png" mode="" @click="tcShow(4)"></image>
			</view>

			<view class="align-center">
				<view class="fstj-h-tab" v-for="(m,n) in cjtjTab" :key="n" :class="n==cjtjId?'fstj-h-t-ac':''"
					@click="cjtjBtn(n)">{{$t('common')[m.text]}}</view>
			</view>


			<view class="cjtj-box">
				<view class="align-center">
					<view>
						<view class="cjtj-rs gray3 ft14" v-if="cjtjId==0">{{$t('fan').成交人数}}
							{{totalInfo.day_fans_deal_num}}({{$t('index').人}})
						</view>
						<view class="cjtj-rs gray3" v-if="cjtjId==0">{{$t('fan').首购粉丝占}}{{$t('fan').客单价}}
							{{totalInfo.day_fans_first_price}}
						</view>
						<view class="cjtj-rs gray3" v-if="cjtjId==0">{{$t('fan').复购粉丝占}}{{$t('fan').客单价}}
							{{totalInfo.day_fans_repeat_price}}
						</view>
					</view>
					<view>
						<view class="cjtj-rs gray3" v-if="cjtjId==1">{{$t('fan').成交人数}}
							{{totalInfo.moon_fans_deal_num}}({{$t('index').人}})
						</view>
						<view class="cjtj-rs gray3" v-if="cjtjId==1">{{$t('fan').首购粉丝占}}{{$t('fan').客单价}}
							{{totalInfo.moon_fans_first_price}}
						</view>
						<view class="cjtj-rs gray3" v-if="cjtjId==1">{{$t('fan').复购粉丝占}}{{$t('fan').客单价}}
							{{totalInfo.moon_fans_repeat_price}}
						</view>
					</view>
					<view>
						<view class="cjtj-rs gray3" v-if="cjtjId==2">{{$t('fan').成交人数}}
							{{totalInfo.total_fans_deal_num}}({{$t('index').人}})
						</view>
						<view class="cjtj-rs gray3" v-if="cjtjId==2">{{$t('fan').首购粉丝占}}{{$t('fan').客单价}}
							{{totalInfo.total_fans_first_price}}
						</view>
						<view class="cjtj-rs gray3" v-if="cjtjId==2">{{$t('fan').复购粉丝占}}{{$t('fan').客单价}}
							{{totalInfo.total_fans_repeat_price}}
						</view>
					</view>


				</view>
				<view class="" style="width: 650rpx;height: 500rpx;">
					<!-- <qiun-data-charts tooltipFormat="yAxisDemo1" type="ring" :opts="cjfsOpts" :chartData="cjfsChart" /> -->
					<l-echart ref="chartReff" @finished="initf"></l-echart>
				</view>
			</view>
		</view>

		<!-- 粉丝商品偏好 -->
		<view class="ztsj-box">
			<view class="align-center" style="border-bottom: 2rpx solid #EEEEEE;">
				<view class="ztsj-head gray3">{{$t('fan').粉丝商品偏好}}</view>
				<!-- <image style="width: 28rpx;margin-left: 12rpx;" src="../../static/images/fans/icon_wenhao.png" mode="widthFix"></image> -->
			</view>

			<view class="fsph-box">
				<view class="align-center">
					<view class="fstj-h-tab" v-for="(m,n) in fsphYtab" :key="n" :class="n==fsphYindex?'fstj-h-t-ac':''"
						@click="fsphYbtn(n)">{{$t('common')[m.text]}}</view>
				</view>

				<view class="align-center" style="margin-top: 34rpx;">
					<view class="fstj-h-tab" v-for="(m,n) in fsphTtab" :key="n" :class="n==fsphTindex?'fstj-h-t-ac':''"
						@click="fsphTbtn(n)">{{$t('common')[m.text]}}</view>
				</view>

				<view class="fsph-con">
					<view class="align-center fsph-c-head">
						<view class="fsph-l-a fsph-h-pub gray3">{{$t('fan').排名}}</view>
						<view class="fsph-l-b fsph-h-pub gray3">{{$t('fan').商品名称}}</view>
						<view class="fsph-l-c fsph-h-pub gray3">{{$t('fan').购买数量}}</view>
					</view>
					<view class="fsph-list">
						<!-- v-if="fsphLists.length>0" -->
						<view>
							<view class="align-center fsph-item" v-for="(m,n) in fsphLists" :key="n">
								<view class="fsph-l-a fsph-i-pub gray3 ">{{n==fsphLists.length-1?$t('fan').合计:n+1}}</view>
								<view class="fsph-l-b fsph-i-pub gray3 " style="text-align: left;">{{m.store_name}}</view>
								<view class="fsph-l-c fsph-i-pub gray3 ">{{m.total_product_num}}</view>
							</view>
						</view>
					</view>
<!-- 					<view class="align-center justify-between fsph-c-bot">
						<view class="gray3" style="font-size: 28rpx;">{{$t('fan').合计}}</view>
						<view class="gray3" style="font-size: 28rpx;">{{fsphTotalnum}}</view>
					</view> -->
				</view>
			</view>
		</view>

		<!-- 整体发展力 弹窗 -->
		<u-popup :show="tcpop" mode="center" round="10">
			<view class="tc-box">
				<view class="align-center tc-head">
					<image class="tc-h-icon" src="../../static/images/fans/shu-bor.png" mode="aspectFill"
						style="width: 7rpx;height: 33rpx;"></image>
					<view class="tc-h-tit gray3">
						<text v-if="tcType==1">{{$t('fan').整体发展力}}</text>
						<text v-if="tcType==2">{{$t('fan').整体消费力}}</text>
						<text v-if="tcType==3">{{$t('fan').粉丝活跃度}}</text>
						<text v-if="tcType==4">{{$t('fan').成交粉丝}}</text>
						<text v-if="tcType==5">{{$t('fan').销售统计}}</text>
						<text v-if="tcType==6">{{$t('fan').粉丝等级人数统计}}</text>
					</view>
				</view>
				<view class="tc-h-text gray9">
					<text v-if="tcType==1">{{$t('fan').粉丝人数需达标50人及以上}}</text>
					<text v-if="tcType==2">{{$t('fan').粉丝人数需达标50人及以上}}</text>
					<text v-if="tcType==3">{{$t('fan').数据统计截止至前一天}}</text>
				</view>

				<view>
					<!-- 整体发展力 -->
					<view class="tc-con" v-if="tcType==1">
						<view class="tc-c-head align-center">
							<view class="tc-c-a tc-c-text gray3">
								<!-- <view>{{$t('fan').团队直接}}{{$t('fan').邀请成员数}}</view> -->
								<view>{{$t('fan').团队直接邀请粉丝数}}</view>
								<!-- <view>{{$t('fan').邀请成员数}}</view> -->
							</view>
							<view class="tc-c-b tc-c-text gray3">
<!-- 								<view>{{$t('fan').最大部门业绩}}</view>
								<view>{{$t('fan').占自己业绩比}}</view> -->
								
								<view>{{$t('fan').最大粉丝销售额占自己销售额比}}</view>
							</view>
							<view class="tc-c-c tc-c-text gray3">{{$t('fan').团队发展力}}</view>
						</view>

						<view class="tc-c-list">
							<view class="align-center tc-c-item">
								<view class="tc-c-a tc-c-text gray3">1{{$t('fan').位}}</view>
								<view class="tc-c-b tc-c-text gray3">
									<view>{{$t('fan').大于}}80%</view>
									<view>{{$t('fan').大于等于}}60%{{$t('fan').小于}}80%</view>
									<view>{{$t('fan').大于等于}}30%{{$t('fan').小于}}60%</view>
									<view>{{$t('fan').大于}}0%小于30%</view>
									<view>{{$t('fan').等于}}0%</view>
								</view>
								<view class="tc-c-c tc-c-text gray3">
									<view>{{$t('fan').不利发展}}</view>
									<view>{{$t('fan').发展困难}}</view>
									<view>{{$t('fan').发展困难}}</view>
									<view>{{$t('fan').发展困难}}</view>
									<view>{{$t('fan').发展困难}}</view>
								</view>
							</view>
						</view>
						<view class="tc-c-list" style="background-color: #F8F8F8;">
							<view class="align-center tc-c-item">
								<view class="tc-c-a tc-c-text gray3">2{{$t('fan').位及以上}}</view>
								<view class="tc-c-b tc-c-text gray3">
									<view>{{$t('fan').大于}}80%</view>
									<view>{{$t('fan').大于等于}}60%{{$t('fan').小于}}80%</view>
									<view>{{$t('fan').大于等于}}30%{{$t('fan').小于}}60%</view>
									<view>{{$t('fan').大于}}0%小于30%</view>
									<view>{{$t('fan').等于}}0%</view>
								</view>
								<view class="tc-c-c tc-c-text gray3">
									<view>{{$t('fan').发展困难}}</view>
									<view>{{$t('fan').利好发展}}</view>
									<view>{{$t('fan').稳健发展}}</view>
									<view>{{$t('fan').发展优异}}</view>
									<view>{{$t('fan').发展困难}}</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 整体消费力 -->
					<view class="tc-con" v-if="tcType==2">
						<view class="tc-c-head align-center">
							<view class="tc-c-a tc-c-text gray3"
								style="width: 439rpx;border-right: 2rpx solid #EEEEEE;">
								<view>{{$t('fan').近三个月消费人数占团队总人数比}}</view>
								<!-- <view>{{$t('fan').占团队总人数比}}</view> -->
							</view>
							<view class="tc-c-c tc-c-text gray3">{{$t('fan').消费力}}</view>
						</view>
						<view class="tc-c-list">
							<view class="align-center tc-c-item" v-for="(m,n) in ztxfl" :key="n">
								<view class="tc-c-a tc-c-text gray3"
									style="width: 439rpx;border-right: 2rpx solid #EEEEEE;">
									{{$t('fan')[m.title]}}
								</view>
								<view class="tc-c-c tc-c-text gray3">{{$t('fan')[m.cont]}}</view>
							</view>
						</view>
					</view>

					<!-- 粉丝活跃度 -->
					<view class="tc-con" v-if="tcType==3">
						<view class="tc-c-list">
							<view class="align-center tc-c-item" v-for="(m,n) in fshyArr" :key="n">
								<view class="tc-c-a tc-c-text gray3" style="width: 600rpx;">{{$t('fan')[m.title]}}
								</view>
							</view>
						</view>
					</view>
					
					
					<!-- 成交粉丝 -->
					<view class="tc-con" v-if="tcType==4">
						<view class="tc-c-list">
							<view class="align-center tc-c-item">
								<view class="tc-c-a tc-c-text gray3" style="width: 600rpx;">{{$t('fan').首购粉丝_仅下单一次的粉丝}}
								</view>
							</view>
							<view class="align-center ">
								<view class="tc-c-a tc-c-text gray3" style="width: 600rpx;">
									{{$t('fan').复购粉丝_在所选时间内下单2单及以上的粉丝}}
								</view>
							</view>
						</view>
					</view>
					<!-- 销售额统计 -->
					<view class="tc-con" v-if="tcType==5">
						<view class="tc-c-list">
							<view class="align-center tc-c-item">
								<view class="tc-c-a tc-c-text gray3" style="width: 600rpx;">
									{{$t('fan').PLUS套组在今日本月上月粉丝成功下单PLUS套组的数量不包含取消退款订单}}
								</view>
							</view>
							<view class="align-center ">
								<view class="tc-c-a tc-c-text gray3" style="width: 600rpx;">
									{{$t('fan').运营商套组在今日本月上月粉丝成功下单必买套组的数量不包含取消退款订单}}
								</view>
							</view>
						</view>
					</view>
					<!-- 等级统计 -->
					<view class="tc-con" v-if="tcType==6">
						<view class="tc-c-list">
							<view class="align-center tc-c-item" v-for="(item,index) in djtjArr " :key="index">
								<view class="tc-c-a tc-c-text gray3" style="width: 600rpx;">{{$t('fan')[item.title]}}
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="tc-bot" @click="tcHide()">{{$t('fan').我知道了}}</view>
				<image class="tc-h-gb" @click="tcHide()" src="../../static/images/fans/icon_cuowu.png" mode=""></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		data() {
			return {
				tcpop: false, //弹窗是否打开
				tcType: 1, //1整体发展力

				// 销售额---
				xseTab: [{
						id: 1,
						text: '本月'
					},
					{
						id: 2,
						text: '上月'
					},
					{
						id: 3,
						text: '累计'
					}
				],
				xseId: 0,
				// 数据
				xsetjChart: {},
				// 样式配置
				xsetjOpts: {
					color: ["#F89D0E", "#4DCBB3", "#775AED"],
					tooltip: {
						trigger: 'item',
						backgroundColor: "rgba(102, 102, 102, 0.8)",
						borderColor: 'none',
						textStyle: {
							color: "#ffffff"
						},
						formatter: function(param) {
							return param.marker + param.name + '\n' + param.value + ' ' + '(' + param.percent + ')%';
						}
					},
					legend: {
						orient: 'vertical',
						left: 'left',
					},
					series: [{
						name: '',
						type: 'pie',
						radius: ['30%', '40%'],
						center: ['50%', '60%'],
						data: '',
						label: {
							width: 100, //隐藏标示文字
							fontSize: 12,
							formatter: '{a}\n{b}  \n{c} \n{d}%',

						},
						labelLine: {
							length: 25,
						},
					}, ],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				},
				// 销售额---

				// 本月新增---
				// 样式配置
				byxzOpts: {
					color: ["#1890FF"],
					padding: [15, 24, 0, 10],
					// enableScroll: true,
					dataLabel: false,
					fontSize: 10,
					legend: {
						show: false
					},

					xAxis: {
						disableGrid: true,
						// scrollShow: true,
						// itemCount: 4,
						rotateLabel: true,
						marginTop: 10,
						rotateAngle: 45,
						labelCount: 4,
						fontSize: 10,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							axisLine: false,
						}]
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						},
						tooltip: {
							bgColor: "#333333",
							borderRadius: 4,
							legendShow: false
						}
					}
				},

				// 数据本月新增---
				byxzChart: {},


				// 本月结算---
				// 样式配置
				byjsOpts: {
					color: ["#1890FF"],
					padding: [15, 24, 0, 10],
					// enableScroll: true,
					dataLabel: false,
					fontSize: 10,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						// scrollShow: true,
						// itemCount: 4,
						rotateLabel: true,
						marginTop: 10,
						rotateAngle: 45,
						labelCount: 4,
						fontSize: 10,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						// fontSize: 8,
						data: [{
							axisLine: false,
						}]
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						},
						tooltip: {
							bgColor: "#333333",
							borderRadius: 4,
							legendShow: false
						}
					}
				},

				// 数据
				byjsChart: {},
				// 本月结算---

				// 按等级---
				djTab: [{
						id: 1,
						text: '今日'
					},
					{
						id: 2,
						text: '本月'
					},
					{
						id: 3,
						text: '全部'
					}
				],
				djId: 0,
				// 按等级---

				// 成交粉丝统计---
				cjtjTab: [{
						id: 1,
						text: '今日'
					},
					{
						id: 2,
						text: '本月'
					},
					{
						id: 3,
						text: '全部'
					}
				],
				cjtjId: 0,
				// 成交粉丝数据
				cjfsChart: {},
				// 样式配置
				cjfsOpts: {
					color: ["#F89D0E", "#FF665F"],
					tooltip: {
						trigger: 'item',
						backgroundColor: "rgba(102, 102, 102, 0.8)",
						borderColor: 'none',
						textStyle: {
							color: "#ffffff",

						},
						formatter: function(param) {
							return param.marker + param.name + '\n' + param.value + ' ' + '(' + param.percent + ')%';
						},
					},
					legend: {
						orient: 'vertical',
						left: 'left',
					},
					series: [{
						name: '',
						type: 'pie',
						radius: ['30%', '40%'],
						center: ['50%', '60%'],
						data: '',
						label: {
							width: 100, //隐藏标示文字
							fontSize: 12,
							formatter: '{a}\n{b}  \n{c} \n{d}%'
						},
						labelLine: {
							length: 25,
						},
					}, ],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				},
				// 成交粉丝统计---

				// 粉丝商品偏好---
				fsphYtab: [{
						id: 1,
						text: '本月'
					},
					{
						id: 2,
						text: '上月'
					},
				],
				fsphYindex: 0,
				fsphTtab: [{
						id: 3,
						text: 'plus套组'
					},
					{
						id: 4,
						text: '运营商套组'
					},
					{
						id: 1,
						text: '其他商品'
					},
				],
				fsphTindex: 0,
				// 粉丝商品偏好---,
				thisMonth: '', //本月
				lastMonth: '', //上月
				month: '', //选中的月份
				fsphLists: [], //粉丝商品偏好数组
				fsphTotalnum: 0, //粉丝偏好合计
				totalInfo: {}, //整体数据
				salesStatistics: [], //销售额统计
				cjfstjArr: [], //销售额统计
				// 整体数据
				yjsArr: [{
						text: '本月已结算销售额',
						num: 0
					},
					{
						text: '预估本月结算销售额',
						num: 0
					},
					{
						text: '预估未来7天结算销售额',
						num: 0
					},
					{
						text: '上月已结算销售额',
						num: 0
					},
				],
				djArr: [{
						text: '会员',
						num: 0
					},
					{
						text: 'plus会员',
						num: 0
					},
					{
						text: '运营商会员',
						num: 0
					},
					{
						text: '运营商plus会员',
						num: 0
					},
				],
				hydArr: [{
						text: '高活跃粉丝',
						id: 5,
						num: 0
					},
					{
						text: '中活跃粉丝',
						id: 4,
						num: 0
					},
					{
						text: '低活跃粉丝',
						id: 3,
						num: 0
					},
					{
						text: '不活跃粉丝',
						id: 2,
						num: 0
					},
					{
						text: '未购物粉丝',
						id: 1,
						num: 0
					},
				],
				categoriesadd: [], //本月新增
				addseriesData: [], //本月新增
				categoriessettl: [], //已结算销售额
				settlseriesData: [], //已结算销售额
				djtjArr: [{
						title: '会员在今日本月加入成为会员且未升级的粉丝人数'
					},
					{
						title: 'PLUS会员在今日本月从会员升级成为PLUS会员的粉丝人数'
					},
					{
						title: '运营商会员在今日本月升级成为运营商会员的粉丝人数'
					},
					{
						title: '运营商PLUS会员在今日本月升级成为运营商PLUS会员的粉丝人数包含会员升级运营商PLUS会员PLUS会员升级运营商PLUS会员运营商会员升级运营商PLUS会员'
					},
					{
						title: '筛选全部为查看当前团队下各等级粉丝人数'
					}
				], //等级统计
				fshyArr: [{
						title: '高活跃粉丝一个月内有下单'
					},
					{
						title: '中活跃粉丝13个月内有下单'
					},
					{
						title: '低活跃粉丝36个月内有下单'
					},
					{
						title: '不活跃粉丝超过6个月未下单'
					},
					{
						title: '未购物粉丝从未下单'
					}
				], //粉丝活跃
				// 整体消费力
				ztxfl: [{
						title: 'ling',
						cont: '无消费力'
					},
					{
						title: '小于10',
						cont: '低消费力'
					},
					{
						title: '大于等于10小于30',
						cont: '偏低消费力'
					},
					{
						title: '大于等于30小于60',
						cont: '中消费力'
					},
					{
						title: '大于等于60小于80',
						cont: '高消费力'
					},
					{
						title: '大于等于80',
						cont: '超高消费力'
					}
				],
				xstjTab: [{
					id: 1,
					text: '今日'
				}, {
					id: 2,
					text: '本月'
				}, {
					id: 3,
					text: '全部'
				}],
				xstjArr: [{
						text: 'plus套组',
						num: 0
					},
					{
						text: '运营商套组',
						num: 0
					},
				],
				xstjId: 0
			}
		},

		async mounted() {
			this.getnow()
			this.getoveralldataAPI()
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					// let xsres = {
					// 	series: [{
					// 		data: this.salesStatistics
					// 	}]
					// };
					// let cjres = {
					// 	series: [{
					// 		data: this.cjfstjArr
					// 	}]
					// };
					let byxzres = {
						categories: this.categoriesadd,
						series: [{
							name: this.$t('fan').新增销售额,
							data: this.addseriesData
						}, ],
					};
					let byjsres = {
						categories: this.categoriessettl,
						series: [{
							name: this.$t('index').已结算销售额,
							data: this.settlseriesData
						}, ],
					};
					// this.xsetjChart = JSON.parse(JSON.stringify(xsres));
					// this.cjfsChart = JSON.parse(JSON.stringify(cjres));
					this.byxzChart = JSON.parse(JSON.stringify(byxzres));
					this.byjsChart = JSON.parse(JSON.stringify(byjsres));

				}, 500);
			},
			// 销售额画饼图
			async init(data) {
				// chart 图表实例不能存在data里
				this.xsetjOpts.series[0].data = data
				const chart = await this.$refs.chartRef.init(echarts);
				chart.setOption(this.xsetjOpts)
			},
			//成交粉丝统计
			async initf(data) {
				// chart 图表实例不能存在data里
				this.cjfsOpts.series[0].data = data
				const chart = await this.$refs.chartReff.init(echarts);
				chart.setOption(this.cjfsOpts)
			},
			//获取当前的年月
			getnow() {
				const currentDate = new Date();
				const year = currentDate.getFullYear();
				const month = (currentDate.getMonth() + 1) < 10 ? `0${(currentDate.getMonth() + 1)}` : (currentDate
					.getMonth() + 1); // 月份从0开始，所以要加1
				this.thisMonth = year + '-' + month

				if (month == "01") {
					this.lastMonth = currentDate.getFullYear() - 1 + '-' + '12'
				} else {
					this.lastMonth = currentDate.getFullYear() + '-' + (currentDate.getMonth() < 10 ?
						`0${currentDate.getMonth()}` : currentDate.getMonth())
				}
				this.month = this.thisMonth
				this.getgoodprefAPI()
			},
			// 销售额筛序
			xseBtn(val) {
				this.xseId = val;
				if (this.xseId == 0) {
					let arr = [{
							"name": this.$t('common').plus套组,
							"value": this.totalInfo.plus_f_value || 0,
						},
						{
							"name": this.$t('common').运营商套组,
							"value": this.totalInfo.operate_f_value || 0,
						},
						{
							"name": this.$t('common').其他,
							"value": this.totalInfo.other_f_value || 0,
						}
					]

					this.init(arr);
				}
				if (this.xseId == 1) {
					let arr = [{
							"name": this.$t('common').plus套组,
							"value": this.totalInfo.up_plus_f_value || 0,
						},
						{
							"name": this.$t('common').运营商套组,
							"value": this.totalInfo.up_operate_f_value || 0,
						},
						{
							"name": this.$t('common').其他,
							"value": this.totalInfo.up_other_f_value || 0,
						}
					]
					// arr[0].value = this.totalInfo.up_plus_beilv
					// arr[1].value = this.totalInfo.up_operate_beilv
					// arr[2].value = this.totalInfo.up_other_beilv
					this.init(arr);
				}
				if (this.xseId == 2) {
					let arr = [{
							"name": this.$t('common').plus套组,
							"value": this.totalInfo.total_plus_f_value || 0,
						},
						{
							"name": this.$t('common').运营商套组,
							"value": this.totalInfo.total_operate_f_value || 0,
						},
						{
							"name": this.$t('common').其他,
							"value": this.totalInfo.total_other_f_value || 0,
						}
					]
					this.init(arr);
				}
			},
			// 等级条件筛选
			djBtn(val) {
				this.djId = val;
				if (this.djId == 0) {
					this.djArr[0].num = this.totalInfo.day_vip
					this.djArr[1].num = this.totalInfo.day_pulsvip
					this.djArr[2].num = this.totalInfo.day_operator_vip
					this.djArr[3].num = this.totalInfo.day_operator_pulsvip
				}
				if (this.djId == 1) {
					this.djArr[0].num = this.totalInfo.moon_vip
					this.djArr[1].num = this.totalInfo.moon_pulsvip
					this.djArr[2].num = this.totalInfo.moon_operator_vip
					this.djArr[3].num = this.totalInfo.moon_operator_pulsvip
				}
				if (this.djId == 2) {
					this.djArr[0].num = this.totalInfo.total_vip
					this.djArr[1].num = this.totalInfo.total_pulsvip
					this.djArr[2].num = this.totalInfo.total_operator_vip
					this.djArr[3].num = this.totalInfo.total_operator_pulsvip
				}

			},
			// 销售统计
			xstjBtn(index) {
				this.xstjId = index
				if (this.xstjId == 0) {
					this.xstjArr[0].num = this.totalInfo.day_plus_num
					this.xstjArr[1].num = this.totalInfo.day_operate_num
				}
				if (this.xstjId == 1) {
					this.xstjArr[0].num = this.totalInfo.plus_num
					this.xstjArr[1].num = this.totalInfo.operate_num
				}
				if (this.xstjId == 2) {
					this.xstjArr[0].num = this.totalInfo.total_plus_num
					this.xstjArr[1].num = this.totalInfo.total_operate_num
				}

			},
			// 成交粉丝统计筛选
			cjtjBtn(val) {
				this.cjtjId = val;
				if (this.cjtjId == 0) {
					let arrcj = [{
							"name": this.$t('fan').首购粉丝占,
							"value": this.totalInfo.day_fans_first_num || 0,
						},
						{
							"name": this.$t('fan').复购粉丝占,
							"value": this.totalInfo.day_fans_repeat_num || 0,
						},
					]
					this.initf(arrcj)
				}
				if (this.cjtjId == 1) {
					let arrcj = [{
							"name": this.$t('fan').首购粉丝占,
							"value": this.totalInfo.moon_fans_first_num || 0,
						},
						{
							"name": this.$t('fan').复购粉丝占,
							"value": this.totalInfo.moon_fans_repeat_num || 0,
						},
					]
					this.initf(arrcj)
				}
				if (this.cjtjId == 2) {
					let arrcj = [{
							"name": this.$t('fan').首购粉丝占,
							"value": this.totalInfo.total_fans_first_num || 0,
						},
						{
							"name": this.$t('fan').复购粉丝占,
							"value": this.totalInfo.total_fans_repeat_num || 0,
						},
					]
					this.initf(arrcj)
				}
			},
			// 余额筛序 -月份
			fsphYbtn(val) {
				this.fsphYindex = val;
				if (this.fsphYindex == 1) {
					this.month = this.lastMonth
				} else {
					this.month = this.thisMonth
				}
				this.getgoodprefAPI()
			},
			// 余额筛序 - 套餐
			fsphTbtn(val) {
				this.fsphTindex = val;
				this.getgoodprefAPI()
			},
			// 弹窗打开
			tcShow(val) {
				this.tcpop = true;
				this.tcType = val;
			},

			// 弹窗关闭
			tcHide() {
				this.tcpop = false;
			},
			// 粉丝管理-整体数据
			async getoveralldataAPI() {
				const res = await this.$api.getoveralldata()
				this.totalInfo = res.data.data
				// 销售额统计
				let arr = [{
						"name": this.$t('common').plus套组,
						"value": this.totalInfo.plus_f_value || 0,
					},
					{
						"name": this.$t('common').运营商套组,
						"value": this.totalInfo.operate_f_value || 0,
					},
					{
						"name": this.$t('common').其他,
						"value": this.totalInfo.other_f_value || 0,
					}
				]
				this.init(arr)
				// 销售统计
				this.xstjArr[0].num = this.totalInfo.day_plus_num
				this.xstjArr[1].num = this.totalInfo.day_operate_num
				// 贡献收益
				
				this.salesStatistics = arr
				// console.log(this.totalInfo.plus_beilv, this.totalInfo.operate_beilv)
				// console.log(arr)
				// 已结算销售额统计
				this.yjsArr[0].num = this.totalInfo.moon_sell
				this.yjsArr[1].num = this.totalInfo.expect_moon_sell
				this.yjsArr[2].num = this.totalInfo.expect_seven_sell
				this.yjsArr[3].num = this.totalInfo.up_moon_sell
				
				
				// 等级
				this.djArr[0].num = this.totalInfo.day_vip
				this.djArr[1].num = this.totalInfo.day_pulsvip
				this.djArr[2].num = this.totalInfo.day_operator_vip
				this.djArr[3].num = this.totalInfo.day_operator_pulsvip
				// 活跃度
				this.hydArr[0].num = this.totalInfo.active_5
				this.hydArr[1].num = this.totalInfo.active_4
				this.hydArr[2].num = this.totalInfo.active_3
				this.hydArr[3].num = this.totalInfo.active_2
				this.hydArr[4].num = this.totalInfo.active_1
				// 成交粉丝数
				let arrcj = [{
						"name": this.$t('fan').首购粉丝占,
						"value": this.totalInfo.day_fans_first_num || 0,
					},
					{
						"name": this.$t('fan').复购粉丝占,
						"value": this.totalInfo.day_fans_repeat_num || 0,
					},
				]

				// this.cjfstjArr = arrcj
				this.initf(arrcj)
				// 本月新增
				res.data.add_list.forEach((item, index) => {
					this.categoriesadd.push(item.date)
					// if (uni.getStorageSync('currency') == 'USD') {
					// 	this.addseriesData.push(item.total_amt_award * uni.getStorageSync('rate'))
					// } else {

					// }
					this.addseriesData.push(item.total_amt_award)
				})
				// 已结算销售额 
				res.data.settl_list.forEach((item, index) => {
					this.categoriessettl.push(item.date)
					// if (uni.getStorageSync('currency') == 'USD') {
					// 	this.settlseriesData.push(item.total_amt_award * uni.getStorageSync('rate'))
					// } else {

					// }
					this.settlseriesData.push(item.total_amt_award)
				})
				this.getServerData();
			},
			//粉丝管理-整体数据-商品偏好
			async getgoodprefAPI() {
				const res = await this.$api.getgoodpref({
					goods_type: this.fsphTtab[this.fsphTindex].id,
					month: this.month
				})
				this.fsphLists = res.data
				let total = 0
				this.fsphLists.forEach((item, index) => {
					total += Number(item.total_product_num)
				})
				this.fsphTotalnum = total
				this.fsphLists.push({title:'合计',store_name:'',total_product_num:this.fsphTotalnum})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	// 弹窗
	.tc-box {
		width: 650rpx;
		border-radius: 10rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 30rpx 20rpx 0;
		position: relative;

		.tc-head {
			.tc-h-icon {
				width: 7rpx;
				margin-right: 16rpx;
			}

			.tc-h-tit {
				font-size: 32rpx;
				font-weight: bold;
				margin-right: 12rpx;
			}

			.tc-h-text {
				font-size: 24rpx;
			}
		}

		.tc-con {
			padding: 30rpx 0;

			.tc-c-head {
				font-weight: bold;
				background: #F8F8F8;
				border-bottom: 2rpx solid #EEEEEE;
			}

			.tc-c-list {
				max-height: 530rpx;
				overflow-y: scroll;
			}

			.tc-c-item {
				border-bottom: 2rpx solid #EEEEEE;
			}

			.tc-c-text {
				font-size: 24rpx;
				padding: 20rpx 16rpx;
			}

			.tc-c-a {
				width: 160rpx;
			}

			.tc-c-b {
				width: 300rpx;
				border-left: 2rpx solid #EEEEEE;
				border-right: 2rpx solid #EEEEEE;
			}

			.tc-c-c {
				width: 160rpx;
			}
		}

		.tc-bot {
			height: 97rpx;
			text-align: center;
			line-height: 97rpx;
			font-size: 30rpx;
			color: #F44A42;
			border-top: 2rpx solid #EEEEEE;
		}


		.tc-h-gb {
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			right: 24rpx;
			top: 34rpx;
		}
	}

	.tc-c-item:nth-child(2n) {
		background: #F8F8F8 !important;
	}

	.tc-c-item:last-child {
		border-bottom: none !important;
	}

	// 整体数据
	.ztsj-box {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 32rpx;
		margin-bottom: 24rpx;

		.ztsj-head {
			padding: 32rpx 0;
			font-size: 30rpx;
			font-weight: bold;
		}

		// 整体状态
		.ztzt-box {
			.ztzt-list {
				width: 50%;
				text-align: center;

				.ztzt-text {
					font-size: 28rpx;
					margin-right: 12rpx;
				}

				.ztzt-icon {
					width: 28rpx;
					height: 28rpx;
				}

				.ztzt-img {
					width: 170rpx;
					height: 170rpx;
					margin-top: 30rpx;
				}
			}
		}

		// 已结算销售额统计
		.yjs-box {
			.yjs-list {
				width: 50%;
				margin-bottom: 40rpx;

				.yjs-text {
					font-size: 24rpx;
					margin-bottom: 16rpx;
				}

				.yjs-num {
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}

		// 粉丝统计
		.fstj-list {
			padding: 40rpx 0;

			.fsth-head {
				.fstj-h-bor {
					width: 6rpx;
					height: 28rpx;
					margin-right: 12rpx;
				}

				.fstj-h-text {
					font-size: 28rpx;
				}
			}

			.fstj-l-item {
				width: 33%;
				text-align: center;
				margin-top: 40rpx;

				.fstj-l-text {
					font-size: 24rpx;
					margin-bottom: 16rpx;
					font-weight: bold;
				}

				.fstj-l-num {
					font-size: 40rpx;
					font-weight: bold;
				}
			}
		}

		// 成交粉丝统计
		.cjtj-box {
			padding: 52rpx 0 40rpx;

			.cjtj-rs {
				font-size: 30rpx;
				font-weight: bold;
			}

			.cjtj-left {

				.cjtj-l-bor {
					width: 16rpx;
					height: 16rpx;
					border-radius: 4rpx;
					margin: 8rpx 12rpx 0 0;
				}

				.cjtj-l-text {
					font-size: 24rpx;
					margin-bottom: 20rpx;
				}
			}
		}

		// 粉丝商品偏好
		.fsph-box {
			padding: 30rpx 0;

			.fsph-con {
				padding-top: 32rpx;

				.fsph-c-head {
					background: #FEF3E2;
					border-radius: 10rpx 10rpx 0 0;

					.fsph-h-pub {
						// height: 80rpx;
						text-align: center;
						// line-height: 80rpx;
					}
				}

				.fsph-c-bot {
					height: 80rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					background: #FFFFFF;
					border-radius: 10rpx 10rpx 0 0;
					border-bottom: 2rpx solid #EEEEEE;
				}

				.fsph-list {
					width: 100%;
					// height: 400rpx;
					// overflow-y: scroll;
					background: rgba(127, 127, 127, 0.06);

					.fsph-item {
						text-align: center;
						border-bottom: 2rpx solid #EEEEEE;
					}
				}

				.fsph-l-a {
					width: 96rpx;
					font-size: 24rpx;
				}

				.fsph-l-b {
					width: 410rpx;
					font-size: 24rpx;
					padding: 34rpx 20rpx;
					box-sizing: border-box;
					border-left: 2rpx solid #EEEEEE;
					border-right: 2rpx solid #EEEEEE;
				}

				.fsph-l-c {
					width: 133rpx;
					font-size: 24rpx;
				}


				.fsph-c-list {
					font-size: 24rpx;
				}
			}
		}

		// 按等级、粉丝统计、销售额统计、粉丝商品偏好--tab
		.fstj-h-tab {
			min-width: 180rpx;
			height: 50rpx;
			color: #999999;
			font-size: 24rpx;
			border-radius: 8rpx;
			text-align: center;
			line-height: 50rpx;
			background: rgba(127, 127, 127, 0.07);
			border: 2rpx solid rgba(127, 127, 127, 0.07);
			margin-left: 12rpx;
		}

		.fstj-h-t-ac {
			background: #FFD9D7;
			border: 2rpx solid #EE6753;
			color: #EE6753;
		}
	}


	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>